<template>
	<div>
		<div class="app-container">
			<div class="ipt_a">
				<div style="float: left; line-height: 30px;">��Ȩ״̬��</div>
				<el-select v-model="form.region" placeholder="��ѡ����Ч��Ȩ����">
					<el-option label="����1" value="shanghai"></el-option>
					<el-option label="����2" value="beijing"></el-option>
				</el-select>
			</div>
			<div class="ipt_a">
				<div style="float: left; line-height: 30px;">�鿴���ͣ�</div>
				<el-select v-model="value" placeholder="��ѡ��">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>

			<div class="ipt_b">
				<div style="float: left; line-height: 30px; ">��������</div>
				<div style=" margin-left: 20px; float: left; line-height: 30px;">

					2024
				</div>
			</div>
			<div>
				<el-button type="primary">��ѯ</el-button>
				<el-button>����</el-button>

			</div>
			<div style="float: left; width: 100%; font-size: 26px; font-weight: 600;">
				�������ֺϼƣ�1383566 ��ʹ�á�133658�� ʣ�� ��0��
			</div>

			<div>

				<div style="margin-top: 30px; width: 40%; float: left;">
					<template>
						<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
							style="width: 100%">
							<el-table-column type="selection" width="55">
							</el-table-column>
							<el-table-column fixed prop="bianhao" label="��Ȩ����" width="150">
							</el-table-column>
							<el-table-column prop="senddate" label="��Ȩ״̬" width="120">
							</el-table-column>
							<el-table-column prop="enddate" label="ҽԺ������" width="120">
							</el-table-column>
							<el-table-column prop="name" label="�̲�ָ��" width="120">
							</el-table-column>
							<el-table-column type="selection" width="55">
							</el-table-column>
							<el-table-column fixed prop="bianhao" label="��������" width="150">
							</el-table-column>
							<el-table-column prop="senddate" label="��������" width="120">
							</el-table-column>
							<el-table-column prop="enddate" label="��������" width="120">
							</el-table-column>
							<el-table-column prop="name" label="����ҽԺ������" width="120">
							</el-table-column>
							<el-table-column prop="province" label="����״̬" width="120">
							</el-table-column>
							<el-table-column prop="address" label="���췽" width="200">
							</el-table-column>
							<el-table-column prop="shouqfang" label="�ջ���" width="200">
							</el-table-column>
							<el-table-column prop="jingxiaos" label="�ջ���ַ" width="200">
							</el-table-column>
							<el-table-column prop="jingxiaos" label="������Ʊ" width="200">
							</el-table-column>
							<el-table-column prop="jingxiaos" label="ǩ�ֻص�" width="200">
							</el-table-column>
							<el-table-column prop="jingxiaos" label="��ע" width="200">
							</el-table-column>

						</el-table>
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="currentPage" :page-sizes="[5, 10]" :page-size="pageSize"
							:total="tableData.length" layout="total, sizes, prev, pager, next, jumper">
						</el-pagination>
					</template>
				</div>
				<div style="margin-top: 30px; width: 58%; float: left; margin-left: 2%;">
					<template>
						<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
							style="width: 100%">
							<el-table-column type="selection" width="55">
							</el-table-column>
							<el-table-column fixed prop="bianhao" label="��������" width="150">
							</el-table-column>
							<el-table-column prop="senddate" label="���Ż���" width="120">
							</el-table-column>
							<el-table-column prop="enddate" label="����ʱ��" width="120">
							</el-table-column>
							<el-table-column prop="name" label="����ʱ��" width="120">
							</el-table-column>
							
							<el-table-column prop="jingxiaos" label="��ע" width="200">
							</el-table-column>
							
						</el-table>
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="currentPage" :page-sizes="[5, 10]" :page-size="pageSize"
							:total="tableData.length" layout="total, sizes, prev, pager, next, jumper">
						</el-pagination>
					</template>
				</div>
			</div>
		</div>


		<div>

			<div>
				
				<div style="margin-top: 50px; width: 100%; float: left;">
					<template>
						<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
							style="width: 100%">
							<el-table-column type="selection" width="55">
							</el-table-column>
							<el-table-column fixed prop="bianhao" label="����ʹ�ñ���" width="150">
							</el-table-column>
							<el-table-column prop="senddate" label="ʹ������" width="120">
							</el-table-column>
							<el-table-column prop="enddate" label="��Ȩ����" width="120">
							</el-table-column>
							<el-table-column prop="enddate" label="ʹ������" width="120">
							</el-table-column>
							<el-table-column prop="enddate" label="ҽԺ��������" width="120">
							</el-table-column>
							<el-table-column prop="enddate" label="ʹ�ö�������" width="120">
							</el-table-column>
							<el-table-column prop="province" label="ʹ�û���" width="120">
							</el-table-column>
							<el-table-column prop="province" label="��ע" width="120">
							</el-table-column>

						</el-table>
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="currentPage" :page-sizes="[5, 10]" :page-size="pageSize"
							:total="tableData.length" layout="total, sizes, prev, pager, next, jumper">
						</el-pagination>
					</template>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	export default {

		data() {
			return {
				key: 1, // Ϊ����ÿ���л�Ȩ�޵�ʱ�����³�ʼ��ָ��
				options: [{
					value: '1',
					label: 'ȫ��'
				}, {
					value: '2',
					label: '��ǩ��'
				}, {
					value: '3',
					label: 'δǩ��'
				}],
				data: [{
					label: '�й���½',
					children: [{
							label: '�Ϻ�',
						}, {
							label: '����',
						},
						{
							label: '�Ĵ�',
						}
					]
				}],
				value1: '',
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				value: '',
				chanpingguige: false,
				dialogVisible: false,
				dialogVisiblea: false,
				hospital: false,
				area: false,
				currentPage: 1,
				pageSize: 5,
				jinxiaoshang: false,
				shouhuor: false,
				diquxuanzhe: false,
				tableData: [{
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '���Ķ�',
					province: '������Ȩ',
					city: '������',
					address: '����������ҽԺ',
					shouqfang: 'ӥ̶�з�԰ҽҩ���޹�˾',
					jingxiaos: 'ӥ̶�з�԰ҽҩ���޹�˾',
					peisonf: 'ӥ̶�з�԰ҽҩ���޹�˾',
					shouqyy: '��Ժ',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '���Ķ�',
					province: '������Ȩ',
					city: '������',
					address: '����������ҽԺ',
					shouqfang: 'ӥ̶�з�԰ҽҩ���޹�˾',
					jingxiaos: 'ӥ̶�з�԰ҽҩ���޹�˾',
					peisonf: 'ӥ̶�з�԰ҽҩ���޹�˾',
					shouqyy: '��Ժ',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '���Ķ�',
					province: '������Ȩ',
					city: '������',
					address: '����������ҽԺ',
					shouqfang: 'ӥ̶�з�԰ҽҩ���޹�˾',
					jingxiaos: 'ӥ̶�з�԰ҽҩ���޹�˾',
					peisonf: 'ӥ̶�з�԰ҽҩ���޹�˾',
					shouqyy: '��Ժ',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '���Ķ�',
					province: '������Ȩ',
					city: '������',
					address: '����������ҽԺ',
					shouqfang: 'ӥ̶�з�԰ҽҩ���޹�˾',
					jingxiaos: 'ӥ̶�з�԰ҽҩ���޹�˾',
					peisonf: 'ӥ̶�з�԰ҽҩ���޹�˾',
					shouqyy: '��Ժ',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '���Ķ�',
					province: '������Ȩ',
					city: '������',
					address: '����������ҽԺ',
					shouqfang: 'ӥ̶�з�԰ҽҩ���޹�˾',
					jingxiaos: 'ӥ̶�з�԰ҽҩ���޹�˾',
					peisonf: 'ӥ̶�з�԰ҽҩ���޹�˾',
					shouqyy: '��Ժ',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '���Ķ�',
					province: '������Ȩ',
					city: '������',
					address: '����������ҽԺ',
					shouqfang: 'ӥ̶�з�԰ҽҩ���޹�˾',
					jingxiaos: 'ӥ̶�з�԰ҽҩ���޹�˾',
					peisonf: 'ӥ̶�з�԰ҽҩ���޹�˾',
					shouqyy: '��Ժ',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '���Ķ�',
					province: '������Ȩ',
					city: '������',
					address: '����������ҽԺ',
					shouqfang: 'ӥ̶�з�԰ҽҩ���޹�˾',
					jingxiaos: 'ӥ̶�з�԰ҽҩ���޹�˾',
					peisonf: 'ӥ̶�з�԰ҽҩ���޹�˾',
					shouqyy: '��Ժ',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '���Ķ�',
					province: '������Ȩ',
					city: '������',
					address: '����������ҽԺ',
					shouqfang: 'ӥ̶�з�԰ҽҩ���޹�˾',
					jingxiaos: 'ӥ̶�з�԰ҽҩ���޹�˾',
					peisonf: 'ӥ̶�з�԰ҽҩ���޹�˾',
					shouqyy: '��Ժ',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '���Ķ�',
					province: '������Ȩ',
					city: '������',
					address: '����������ҽԺ',
					shouqfang: 'ӥ̶�з�԰ҽҩ���޹�˾',
					jingxiaos: 'ӥ̶�з�԰ҽҩ���޹�˾',
					peisonf: 'ӥ̶�з�԰ҽҩ���޹�˾',
					shouqyy: '��Ժ',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '���Ķ�',
					province: '������Ȩ',
					city: '������',
					address: '����������ҽԺ',
					shouqfang: 'ӥ̶�з�԰ҽҩ���޹�˾',
					jingxiaos: 'ӥ̶�з�԰ҽҩ���޹�˾',
					peisonf: 'ӥ̶�з�԰ҽҩ���޹�˾',
					shouqyy: '��Ժ',
					shangcaizhibiao: 3
				}],
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				sizeForm: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				}

			}
		},
		methods: {
			onSubmit() {
				console.log('submit!');
			},
			handleClose(done) {
				done();
				// this.$confirm('ȷ�Ϲرգ�')
				// 	.then(_ => {
				// 		done();
				// 	})
				// 	.catch(_ => {});
			},

			handleClick(row) {
				console.log(row);
			},
			handleSizeChange(val) {
				this.pageSize = val;
			},
			handleCurrentChange(val) {
				this.currentPage = val;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ipt_a {
		width: 300px;
		height: 50px;
		float: left;
	}

	.ipt_b {
		width: 450px;
		height: 50px;
		float: left;
	}

	.listdizhi {
		width: 100%;
		height: 100px;
		float: left;
		border-bottom: 1px solid;
	}

	.lie {
		width: 90%;
		height: 100%;
		float: left;

	}

	.listdizhia {
		width: 100%;
		height: 50px;
		float: left;
	}

	.listdizhia div {
		float: left;
		margin-left: 30px;
	}
</style>